<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWorld"
                @keyup.enter="searchData" />&nbsp;<button @click="searchData">Search</button>
        </div>
    </section>
</template>

<script>
import axios from 'axios'
export default {
    name: "search",
    data() {
        return {
            keyWorld: ''
        }
    },
    methods: {
        searchData() {
            //请求前
            this.$bus.$emit('updateListData', { isLoading: true, errMsg: '', userList: [], isFirst: false })
            axios.get(`https://api.github.com/search/users?q=${this.keyWorld}`).then(
                response => {
                    //数据正确
                    this.$bus.$emit('updateListData', { isLoading: false, errMsg: '', userList: response.data.items })
                },
                error => {
                    //数据错误
                    this.$bus.$emit('updateListData', { isLoading: false, errMsg: error.message, userList: [] })
                }
            )
        }
    }

}

</script>
